<!-- 修改手机号页面 -->
<template>
	<view>
		<!-- 验证码登录 输入 布局 (copy于 login页面)-->
		<view class="mb-2 flex align-stretch">
			<view class="border-bottom flex align-center justify-center font px-2">+86</view>
			<input type="text" v-model="phone" placeholder="手机号" class="border-bottom p-2 flex-1" />
		</view>
		<view class="mb-2 flex align-stretch">
			<input type="text" v-model="vercode" placeholder="请输入验证码" class="border-bottom p-2 flex-1" />
			<view
				class="border-bottom flex align-center justify-center font-sm text-white font-weight-bold"
				:class="codeTime > 0 ? 'bg-main-disabled' : 'bg-main'"
				style="width: 180rpx"
				@click="getCode"
				>{{ codeTime > 0 ? codeTime + ' s' : '获取验证码' }}</view
			>
		</view>
		<view class="py-2 px-3">
			<!-- 设置按钮是否禁用 -->
			<button
				class="bg-main text-white"
				style="border-radius: 50rpx; border: 0"
				type="primary"
				:disabled="disabled"
				:class="disabled ? 'bg-main-disabled' : ''"
				@click="submit"
			>
				设置
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '', // 手机号
				vercode: '', // 验证码
				codeTime: 0, // 获取验证码倒计时
			};
		},
		// 监听输入框，有一个为空 按钮就是灰色
		computed: {
			disabled() {
				return this.phone == '' || this.vercode == '';
			},
		},
		// 存放所有事件
		methods: {
			// 正则校验
			check() {
				let rule = /^[1][3-9][0-9]{9}$/;
				// 正则 校验不通过
				if (!rule.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 1000,
					});
					return false;
				}
				return true;
			},
			// 设置 按钮
			submit() {
				if (!this.check()) {
					return;
				}
				// 请求 绑定手机号 接口
				this.$H
					.post(
						'/user/bindphone',
						{
							phone: this.phone,
							code: this.vercode,
						},
						{
							token: true,
						},
					)
					.then((res) => {
						// 调用 vuex中 修改信息方法
						this.$store.commit('editUserInfo', {
							key: 'phone', // state.user中的 phone字段
							value: this.phone,
						});
						uni.showToast({
							title: '绑定手机号成功',
							icon: 'none',
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 800);
					});
			},
			// 获取验证码
			getCode() {
				// 如果正在倒计时，获取验证码 按钮将不在 可点击(防止重复获取)
				if (this.codeTime > 0) return;
				// 表单验证
				if (!this.check()) return;
				// 请求 获取验证码 接口 -------------------------------
				this.$H
					.post(
						'/user/sendcode',
						{
							phone: this.phone,
						},
						{
							native: true, //返回原始数据
						},
					)
					.then((res) => {
						uni.showToast({
							title: '验证码为:' + res.data.msg,
							icon: 'none',
							duration: 3000,
						});
						// 设置定时器，每一秒减一
						this.codeTime = 30; // 倒计时秒 数
						let timer = setInterval(() => {
							if (this.codeTime >= 1) {
								this.codeTime--;
							} else {
								this.codeTime = 0;
								clearInterval(timer); //清除计时器
							}
						}, 1000);
						console.log(res);
					});
			},
		},
	};
</script>

<style lang="scss"></style>
